<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 18134216985
  Date: 2024-04-01
  Time: 12:08
  To change this template use File | Settings | File Templates.
--%>
<link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
<script src="/webjars/layui/2.6.8/layui.js"></script>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>上报维修</title>
</head>
<body>
<%--条件查询--%>
<div class="layui-collapse">
            <div class="layui-form"  id="searchForm" lay-filter="searchForm">
                <input type="text" hidden name="repairpeople" value="${sessionScope.loginUser.ownername}">
            </div>
</div>
<table class="layui-hide" id="ID-table-demo-data" lay-filter="itemTable"></table>
<%--头部工具栏，添加--%>
<script type="text/html" id="headTool">
    <button class="layui-btn" onclick="add()">报修</button>
</script>
<div id="upload" style="display:none;padding:20px">
    <form class="layui-form" id="uploadimgForm" lay-filter="upload">
    <input type="hidden" name="id"/>
    <input type="hidden" name="img"/>
        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
            <i class="layui-icon layui-icon-upload"></i> 单图片上传
        </button>
        <div style="width: 132px;">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                <div id="ID-upload-demo-text"></div>
            </div>
            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </div>
        <hr style="margin: 21px 0;">
    <script>
        layui.use(function(){
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;
            var $ = layui.$;
            // 单图片上传
            var uploadInst = upload.render({
                elem: '#ID-upload-demo-btn',
                url: '/Repairs/uploads', // 实际使用时改成您自己的上传接口即可。
                field : "attach",//文件域的名称 <input type='file' name='attach'/>
                accept : "images",
                multiple: true,
                before: function(obj){
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                    });

                    element.progress('filter-demo', '0%'); // 进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                },
                done: function(res){
                    $("[name=img]").val(res.data.attachPath)
                    // 若上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    // 上传成功的一些操作
                    // …
                    $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                },
                error: function(){
                    // 演示失败状态，并实现重传
                    var demoText = $('#ID-upload-demo-text');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function(n, elem, e){
                    element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});

                    }
                }
            });
        });
    </script>
    </form>
</div>
<div id="add" style="display:none;padding:20px">

    <form class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">维修位置:</label>
            <div class="layui-input-block">
                <input type="text" name="position" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报修描述：</label>
            <div class="layui-input-block">
                <input type="text" name="repairtype" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报修人:</label>
            <div class="layui-input-block">
                <input type="text" name="repairpeople" required  class="layui-input" value="${sessionScope.loginUser.ownername}" disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话:</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预约时间:</label>
            <div class="layui-input-block">
                <input name="hopetime" class="layui-input" placeholder="预约时间">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报修类型:</label>
            <div class="layui-input-block">
                <select name="istype" id="">
                    <option value="1">居家维修</option>
                    <option value="2">公共维修</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">小区:</label>
            <div class="layui-input-block">
                <select name="plotid">
                    <option value="0">全部</option>
                </select>
            </div>
        </div>
    </form>
</div>
<%--修改页面--%>
<div id="update" style="display:none;padding:20px">

    <form class="layui-form" id="updateForm" lay-filter="updateForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">维修位置:</label>
            <div class="layui-input-block">
                <input type="text" name="position" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报修描述：</label>
            <div class="layui-input-block">
                <input type="text" name="repairtype" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报修人:</label>
            <div class="layui-input-block">
                <input type="text" name="repairpeople" required  class="layui-input" value="${sessionScope.loginUser.ownername}" disabled="disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话:</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">预约时间:</label>
            <div class="layui-input-block">
                <input name="hopetime" class="layui-input" placeholder="预约时间">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报修类型:</label>
            <div class="layui-input-block">
                <select name="istype" >
                    <option value="1">居家维修</option>
                    <option value="2">公共维修</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">小区:</label>
            <div class="layui-input-block">
                <select name="plotid">
                    <option value="0">全部</option>
                </select>
            </div>
        </div>
    </form>
</div>
<%--行工具栏--%>
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="update">取消</button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="upload" id="attachImg">照片</button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="updateAll">修改</button>
</script>
    <form class="layui-form" id="updateState" lay-filter="updateState" hidden>
        <input type="text" name="id"/>
        <input type="text" name="stateid"/>
    </form>
<script>
    /*渲染下拉列表*/
    let $=layui.$;
    /*渲染下拉列表*/
    $.get("/property/plot/show").then(({data})=>{
        $(data).each(function (i,e){
            let option =$("<option value='"+e.id+"'>"+e.plotname+"</option>")
            $("[name=plotid]").append(option);
        })
        layui.form.render('select');
    })
    $.get("/Repairstate/selectAllRepairstate").then(({data})=>{
       $(data).each(function (i,e){
           let option=$("<option value='"+e.id+"'>"+e.statename+"</option>")
           $("[name=repstate]").append(option);
       })
        layui.form.render('select');
    })

        //渲染日期
    let table = layui.table;
    let laydate = layui.laydate;
    layui.use(["table","laydate"],function (){
        laydate.render({
            elem : "[name=hopetime]",
            type:'datetime',
            fullPanel:true
        });
        table.render({
            id:'leaders',
            elem:'#ID-table-demo-data',
            url:"/Repairs/selectRepairs",
            toolbar:"#headTool",
            page:true,
            autoWidth: true,
            cols:[[
                {field:'number',align: 'center',type:'numbers',title:"编号"},
                {field:'id',align: 'center',hide:true,title:"序号"},
                {align: 'center',field: 'position',title: '报修位置'},
                {align: 'center',field: 'repairtype',title: '报修描述'},
                {align: 'center',field: 'repairpeople',title: '报修人'},
                {align: 'center',field: 'phone',title: '联系电话'},
                {align: 'center',field: 'plotname',title: '小区名称',templet(d) {
                        return d.plot==null?"-":d.plot.plotname
                    }},
                {align: 'center',field: 'hopetime',title: '预约时间'},
                {align: 'center',field: 'img',title: '照片',templet(d) {
                        return  d.img==null?"-":"<img src='/"+d.img+"' width='50px'/>";
                    }},
                {align: 'center',field: 'money',title: '价格'},
                {align: 'center',field: 'istype',title: '报修类型',templet(d) {
                        return d.istype==1?"居家维修":"公共维修";
                    }},
                {align: 'center',field: 'repstateid',title: '报修状态',templet(d){
                    return d.repairstate == null ? "-" : d.repairstate.statename;
                    }},
                {align: 'center',title: '员工',templet(d) {
                        return d.user == null ? "-" : d.user.username;
                    }},

                {align: 'center',title: '操作',toolbar:"#barDemo",width:200},
            ]]
        })
        var search=layui.form.val('searchForm');
        layui.table.reload('leaders', {
            where: search
        });

    })
    //监听行工具
    table.on("tool(itemTable)",function (obj){
        if(obj.event=="update"){
            updates(obj.data.id);
        }else if(obj.event=="upload"){
            uploads(obj);
        }else if (obj.event=="updateAll"){
            updateInfo(obj);
        }

    })
    layui.upload.render({
        elem : "#attachImg",
        url : "/Repairs/uploads",
        field : "attach",//文件域的名称 <input type='file' name='attach'/>
        accept : "images",
        done(res, index, upload){
            //从res中获取
            var attachPath = res.data.attachPath;
            $("[name=attachPath]").val(attachPath);
        }
    });
    /***
     * 点击取消报修，修改状态
     * @param id
     */
    function updates(id){
        $("[name=stateid]").val(4);
        $("[name=id]").val(id);

        layui.layer.open({
            type:0,
            icon:3,
            area:["250px","200px"],
            title:"提示",
            content:"确定取消吗？",
            btn:["确定","取消"],
            yes(){
                let updateForm=layui.form.val("updateState");
                $.post("/Repairs/updateState",updateForm).then(({msg})=>{
                    layui.layer.close(layui.layer.index);
                    layui.layer.msg(msg);
                    layui.table.reload('leaders')
                })
            }
        })
    }


/*点击添加*/
    function add(){
        $("#addForm")[0].reset();
        layui.layer.open({
            type:1,
            title:"添加",
            area:["500px","500px"],
            content:$("#add"),
            btn:["确定","取消"],
            yes(){
                let addform=layui.form.val("addForm");
                console.log(addform)
                if(addform.hopetime==null ||addform.hopetime==''){
                    layui.layer.msg("请填写完整信息")
                    return;
                }else
                if(addform.phone==null ||addform.phone==''){
                    layui.layer.msg("请填写完整信息")
                    return;
                }else
                if(addform.plotid==0){
                    layui.layer.msg("请填写完整信息")
                    return;
                }else
                if(addform.position==null ||addform.position==''){
                    layui.layer.msg("请填写完整信息")
                    return;
                }else
                if(addform.repairtype==null ||addform.repairtype==''){
                    layui.layer.msg("请填写完整信息")
                    return;
                }else{
                    $.post("/Repairs/addRepairs",addform).then(({msg})=>{
                        layui.layer.close(layui.layer.index);
                        layui.layer.msg(msg);
                        layui.table.reload('leaders')
                    })
                }

            }
        })
    }

    //文件上传
    function uploads(obj){

        //数据回显，将证件描述和用户名回显
        layui.form.val("upload",obj.data);
        //弹出隐藏的窗口
        layui.layer.open({
            type : 1,
            title : "文件上传",
            content : $("#upload"),
            area : ["500px"],
            btn : ["确定","取消"],
            yes(){
                //1.获取文本框中输入的内容
                let params = layui.form.val("upload");
                $.post("/Repairs/updatePath",params) .then(({msg})=>{
                        layui.layer.closeAll();
                        layui.layer.msg(msg);
                        layui.table.reload("leaders");
                })
            }
        })
    }
    /*修改*/
    function updateInfo(obj){
        //数据回显，将证件描述和用户名回显
        layui.form.val("updateForm",obj.data);
        $("[name=plotid]").val(obj.data.plot.id)
        layui.form.render('select');
        //弹出隐藏的窗口
        layui.layer.open({
            type : 1,
            title : "修改信息",
            content : $("#update"),
            area : ["500px"],
            btn : ["确定","取消"],
            yes(){
                //1.获取文本框中输入的内容
                let params = layui.form.val("updateForm");
                $.post("/Repairs/updatePath",params) .then(({msg})=>{
                    layui.layer.closeAll();
                    layui.layer.msg(msg);
                    layui.table.reload("leaders");
                })
            }
        })
    }
</script>
</body>
</html>
